<template>
  <div class="nav">
    <div class="top">
      <div class="left">
        <!-- <div class="icon" @click="toggleNav">
          <i
            class="iconfont"
            :class="isCollapse ? 'icon-expand' : 'icon-collapse'"
          ></i>
        </div> -->
        <div></div>
        <div class="title"></div>
      </div>
      <div class="right">
        <div class="inner">
          <div class="avatar">
            <img :src="userInfoStore.avatar" :alt="userInfoStore.username" />
          </div>
          <div class="message">{{ userInfoStore.username }}，欢迎您回来!</div>
          <div class="icon" @click="handlelogOut">
            <i class="iconfont icon-logout"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { vConfirm } from "@/plugins/vConfirm";
import { vToast } from "@/plugins/vToast";
import { useUserInfoStore } from "@/store/userInfoStore";

const isCollapse = ref(false);
const emit = defineEmits(["toggleNav", "search"]);
const keyword = ref(null);

// 使用Pinia store获取用户信息
const userInfoStore = useUserInfoStore();

// 初始化加载用户信息
userInfoStore.loadUserInfo();

const toggleNav = () => {
  isCollapse.value = !isCollapse.value;
  emit("toggleNav", isCollapse.value);
};

const handlelogOut = () => {
  vConfirm({
    message: "确定退出吗?",
  })
    .then(() => {
      // 使用store的logout方法
      userInfoStore.logout();
      setTimeout(() => {
        vToast({
          message: "退出成功！",
        });
        setTimeout(() => {
          // window.location.href = "/#/user/login";
        }, 500);
      }, 500);
    })
    .catch(() => {});
};
const search = () => {
  if (!keyword.value) {
    vToast({
      message: "请输入产品名称",
      position: "top",
    });
  } else {
    emit("search", keyword.value);
  }
};
</script>
<style lang="less" scoped>
@import url("@/assets/css/variables.less");

.nav {
  height: 100%;
  background: #f0f2f5;
  border-bottom: #ddd 1px solid;
  .top {
    // background: var(--bs-theme-color);
    display: flex;
    justify-content: space-between;
    height: 100%;
    .icon {
      width: 60px;
      height: 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-right: #ddd 1px solid;
      cursor: pointer;
      .iconfont {
        font-size: 22px;
      }
    }
  }
}
.left {
  display: flex;
  gap: 20px;
  align-items: center;
}
.right {
  .inner {
    display: flex;
    gap: 22px;
    align-items: center;
    .avatar {
      display: flex;
      flex-direction: column;
      justify-content: center;
      img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: var(--bs-bg-color) 2px solid;
      }
    }
    .icon {
      border-right: none;
      border-left: rgba(0, 0, 0, 0.2) 1px solid;
    }
    .message {
      display: flex;
      align-items: center;
    }
  }
}
.searchBox {
  display: flex;
  border: var(--bs-theme-color) 1px solid;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  overflow: hidden;
  .vButton {
    border: none;
    color: var(--bs-bg-color);
    background: var(--bs-theme-color);
    border-radius: 0;
  }
  .vInput {
    text-indent: 1em;
    color: var(--bs-text-color);
    &::placeholder {
      color: rgba(0, 0, 0, 0.4);
    }
  }
}
</style>
